<template>
  <div>
    <div v-if="conditionWinVisible">
      <div
        class="
          vc-text-lg vc-font-semibold vc-text-center vc-py-2 vc-mb-2 vc-border-b vc-border-solid vc-border-gray-300
        "
      >
        {{ conditionWinTitle }}
      </div>
      <div class="vc-p-2">
        <FormItem label="关联数据键值">
          <select
            v-model="selDataKey"
            class="vc-border vc-border-solid vc-border-gray-300 vc-rounded vc-px-1 vc-py-0.5"
          >
            <option v-for="key in curDataKeys" :key="key" :value="key">{{ key }}</option>
          </select>
        </FormItem>
        <FormItem label="下限" class="mb-0">
          <LimitInput v-model:value="lowerLimit" />
        </FormItem>
        <FormItem label="上限">
          <LimitInput v-model:value="upperLimit" />
        </FormItem>
        <template v-if="curIns">
          <SetLabelValueProps
            v-if="curInsType === ConfigurationType.LabelValue"
            ref="curSetPropsIns"
            :comp-instance="curIns"
          />
          <SetPipePathProps
            v-else-if="curInsType === ConfigurationType.PipePath"
            ref="curSetPropsIns"
            :comp-instance="curIns"
          />
          <SetCommonProps :comp-instance="curIns" />
        </template>
      </div>
      <div class="vc-text-center vc-py-2">
        <button class="vc-btn vc-btn-lg vc-mr-2" @click="conditionWinVisible = false">取消</button>
        <button class="vc-btn vc-btn-lg vc-btn-blue" @click="saveCondition">确定</button>
      </div>
    </div>
    <div v-else-if="!emptyMes && conditionData.length > 0">
      <div
        v-for="(el, i) in conditionData"
        :key="el.id"
        class="vc-p-2 vc-pr-0 vc-border-b vc-border-solid vc-border-gray-300 hover:vc-bg-gray-100"
      >
        <div class="vc-pb-2">
          <!-- <Icon name="arrow-up" class="vc-mr-2 vc-text-gray-400" /> -->
          <span v-if="el.min !== null" class="vc-text-xs">{{ el.min }} &lt;= </span>
          <span class="vc-text-sm vc-text-blue-600 vc-font-semibold">{{ el.dataKey }}</span>
          <span v-if="el.max !== null" class="vc-text-xs"> &lt;= {{ el.max }}</span>
        </div>
        <div class="vc-text-right">
          <span
            class="vc-cursor-pointer active:vc-text-gray-400 vc-px-2 active:vc-opacity-80 vc-inline-block"
            @click="copyCondition(el)"
          >
            <Icon name="copy"></Icon>
          </span>
          <span
            class="vc-cursor-pointer active:vc-text-gray-400 vc-px-2 active:vc-opacity-80 vc-inline-block"
            @click="editCondition(el)"
          >
            <Icon name="edit"></Icon>
          </span>
          <span
            class="vc-cursor-pointer active:vc-text-gray-400 vc-px-2 active:vc-opacity-80 vc-inline-block"
            @click="delCondition(i)"
          >
            <Icon name="delete"></Icon>
          </span>
        </div>
      </div>
      <div class="vc-py-2 vc-text-center">
        <button class="vc-btn vc-btn-xl" @click="showAddConditionDialog">增加条件</button>
      </div>
    </div>
    <div v-else class="vc-text-center vc-text-lg vc-text-gray-500 vc-pt-16 vc-px-2">
      <span v-if="emptyMes">
        {{ emptyMes }}
      </span>
      <span v-else>
        暂无条件数据，请先
        <a class="vc-text-blue-500 vc-font-semibold vc-cursor-pointer" @click="showAddConditionDialog">添加</a>
      </span>
    </div>
    <!-- <Dialog v-model:visible="conditionWinVisible" :title="conditionWinTitle" :show-btn="true" @ok="saveCondition">
      <div class="vc-px-6 vc-py-4 vc-w-80">
        <FormItem label="关联数据键值">
          <select
            v-model="selDataKey"
            class="vc-border vc-border-solid vc-border-gray-300 vc-rounded vc-px-1 vc-py-0.5"
          >
            <option v-for="key in curDataKeys" :key="key" :value="key">{{ key }}</option>
          </select>
        </FormItem>
        <FormItem label="上限">
          <LimitInput v-model:value="upperLimit" />
        </FormItem>
        <FormItem label="下限" class="mb-0">
          <LimitInput v-model:value="lowerLimit" />
        </FormItem>
        <div class="vc-text-xl vc-font-semibold vc-py-2">label样式</div>
        <FontProps v-model:value="labelCssProps" :enable-empty-style="true" />
        <div class="vc-text-xl vc-font-semibold vc-py-2">value样式</div>
        <FontProps v-model:value="valueCssProps" :enable-empty-style="true" />
      </div>
    </Dialog> -->
  </div>
</template>
<script lang="ts" setup>
import { inject, nextTick, ref, watch } from "vue";
import { ConditionalPanelExpose, ConfigurationType, RootCommon, RootCommonKey } from "../types";
import type { ConfigurationInstance, ToggleSelectData } from "/@/components/types";
import FormItem from "/@/components/base/FormItem.vue";
import LimitInput from "./LimitInput.vue";
import { Condition, SetPropsExpose } from "./types";
import { buildShortUUID } from "/@/utils/uuid";
import Icon from "/@/components/base/Icon.vue";
import SetLabelValueProps from "./SetLabelValueProps.vue";
import SetPipePathProps from "./SetPipePathProps.vue";
import SetCommonProps from "./SetCommonProps.vue";

const props = defineProps<{
  curSelectData: ToggleSelectData[];
}>();

const emptyMes = ref("请点击选择组件");
// const noneConditionData = ref(false);
const { compInstance } = inject(RootCommonKey) as RootCommon;

/**
 * common
 */
function getDataKeys() {
  const dataKeys: string[] = [];
  for (const id in compInstance) {
    const ins = compInstance[id];
    if (ins && ins.getDataKey) {
      const key = ins.getDataKey();
      if (key) {
        dataKeys.push(key);
      }
    }
  }
  return dataKeys;
}
function handleSelectDataChange(data: ToggleSelectData[]) {
  // noneConditionData.value = false;
  reset();
  if (data.length > 0) {
    if (data.length === 1) {
      const item = data[0];
      const keys = getDataKeys();
      if (keys.length === 0) {
        emptyMes.value = "暂无已绑定数据键值的数据点组件，请先添加";
      } else {
        curDataKeys.value = keys;
        if (item.type === ConfigurationType.LabelValue || item.type === ConfigurationType.PipePath) {
          emptyMes.value = "";
          const ins = compInstance[item.id as string];
          if (ins.getConditionData) {
            curIns.value = ins;
            curInsType.value = item.type;
            conditionData.value = ins.getConditionData();
          }
        } else {
          emptyMes.value = "该组件暂不支持绑定条件";
        }
      }
    } else {
      emptyMes.value = "请选择单个组件";
    }
  } else {
    emptyMes.value = "请点击选择组件";
  }
}
watch(() => props.curSelectData, handleSelectDataChange, {
  deep: true,
});
function reset() {
  if (curIns.value && curIns.value.restoreCondition) {
    curIns.value.restoreCondition();
    curIns.value = null;
  }
  conditionWinVisible.value = false;
  conditionData.value = [];
}
/**
 * common
 */
const curIns = ref<ConfigurationInstance<any> | null>(null);
const curSetPropsIns = ref<SetPropsExpose>();
const curInsType = ref<ConfigurationType>(ConfigurationType.LabelValue);
let curCondition: Condition | null = null;
/**
 * condition list
 */
const conditionData = ref<Condition[]>([]);
function delCondition(index: number) {
  conditionData.value.splice(index, 1);
}
function editCondition(el: Condition) {
  conditionWinTitle.value = "编辑条件";
  curCondition = el;
  selDataKey.value = el.dataKey;
  upperLimit.value = el.max;
  lowerLimit.value = el.min;
  conditionWinVisible.value = true;
  nextTick(() => {
    curSetPropsIns.value?.setCondition(el);
  });
}
function copyCondition(el: Condition) {
  conditionWinTitle.value = "复制条件";
  curCondition = null;
  selDataKey.value = el.dataKey;
  upperLimit.value = el.max;
  lowerLimit.value = el.min;
  conditionWinVisible.value = true;
  nextTick(() => {
    curSetPropsIns.value?.setCondition(el);
  });
}
/**
 * condition dialog
 */
const curDataKeys = ref<string[]>([]);
const conditionWinVisible = ref(false);
watch(conditionWinVisible, (v) => {
  if (!v) {
    if (curIns.value && curIns.value.restoreCondition) {
      curIns.value.restoreCondition();
    }
  }
});
const conditionWinTitle = ref("");
function showAddConditionDialog() {
  conditionWinTitle.value = "新增条件";
  selDataKey.value = curDataKeys.value[0];
  curCondition = null;
  upperLimit.value = 0;
  lowerLimit.value = 0;
  conditionWinVisible.value = true;
}
const selDataKey = ref("");
const upperLimit = ref<number | null>(0);
const lowerLimit = ref<number | null>(0);
function saveCondition() {
  if (lowerLimit.value !== null && upperLimit.value !== null && upperLimit.value < lowerLimit.value) {
    return alert("上限值不能小于下限值");
  }
  if (!curSetPropsIns.value) return;
  const re = curSetPropsIns.value.getSetResult();
  if (!re) return;
  const condition: Condition = {
    id: buildShortUUID("condition"),
    dataKey: selDataKey.value,
    min: lowerLimit.value,
    max: upperLimit.value,
    ...re,
  };
  if (curCondition) {
    Object.assign(curCondition, condition);
  } else {
    conditionData.value.push(condition);
  }
  conditionWinVisible.value = false;
}
/**
 * expose
 */
const myExpose: ConditionalPanelExpose = {
  refresh() {
    handleSelectDataChange(props.curSelectData);
  },
};
defineExpose(myExpose);
</script>
